<template>
  <div>
    <el-dialog
      :title="title"
      :visible.sync="visible"
      waccountIdth="60%"
      :before-close="cancel"
      @open="open"
    >
      <div class="dialog-content">
        <el-descriptions class="margin-top" :column="2" border>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-office-building" />
              项目名称
            </template>
            <el-input v-model="form.projectName" />
          </el-descriptions-item>

          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-user" />
              项目编号
            </template>
            <el-input v-model="form.id" :disabled="index === 0" />
          </el-descriptions-item>

          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-office-building" />
              项目类型
            </template>
            <el-select
              v-model="form.productType"
              clearable
              filterable
              placeholder="全部"
              size="medium"
              style="waccountidth: 100%"
              @change="productTypeSelected"
            >
              <el-option
                v-for="item in productTypeList"
                :key="item.id"
                :value="item.id"
                :label="item.productType"
              />
            </el-select>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-office-building" />
              类型描述
            </template>
            <el-input :value="productTypeDescription" disabled />
          </el-descriptions-item>

          <el-descriptions-item :span="2">
            <template slot="label">
              <i class="el-icon-office-building" />
              选择产品
            </template>
            <el-select
              v-model="form.product"
              clearable
              filterable
              placeholder="全部"
              multiple
              size="medium"
              style="width:100%"
              @change="productSelected"
            >
              <el-option
                v-for="item in productList"
                :key="item.id"
                :value="item.id"
                :label="item.productName"
              />
            </el-select>
          </el-descriptions-item>
          <el-descriptions-item :span="2">
            <template slot="label">
              <i class="el-icon-office-building" />
              项目描述
            </template>
            <el-input v-model="form.description" />
          </el-descriptions-item>
        </el-descriptions>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="ok">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getProductTypeBriefInfos } from "@/api/productType";
import { getProductBriefInfosByTypeId } from "@/api/product";
import { mapGetters } from "vuex";
export default {
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    projectInfo: {
      type: Object,
      // eslint-disable-next-line vue/require-valaccountId-default-prop
      default: {},
    },
    title: {
      type: String,
      default: "",
    },
    index: {
      type: Number,
      default: 0,
    },
    // productTypeList: {
    //   type: Array,
    //   // eslint-disable-next-line vue/require-valaccountId-default-prop
    //   default: [],
    // },
  },
  data() {
    return {
      form: {
        id: "",
        accountId: "", // vuex中获取
        projectName: "",
        description: "",
        productType: "",
        product: [],
      },

      // 组织描述信息获取
      productTypeDescription: "",
      productList: [], // 业务获取
      productTypeList: [],
      // headers: {
      //   Authorization: getToken(),
      // },
    };
  },
  computed: {
    ...mapGetters(["accountId"]),
    uploadURL() {
      return "";
    },
  },
  created() {
    this.getProductAndTypeList();
  },
  methods: {
    async getProductAndTypeList() {
      const res_type = await getProductTypeBriefInfos();
      this.productTypeList = res_type.data;
      const res_product = await getProductBriefInfosByTypeId();
      this.productList = res_product.data;
    },

  

    productTypeSelected(val) {
      console.log("@@@@@@", val);
      this.form.productType = val;
      // 拿到产品类型id 利用组织集合获取过滤出对应组织对象
      if (val) {
        const res = this.productTypeList.filter((productType) => {
          return productType.id === val;
        });
        this.productTypeDescription = res[0].description;
        console.log(this.productTypeDescription);
        //先清空所有的产品
        this.form.product = [];
        //获取对应类型所有的产品
        getProductBriefInfosByTypeId({ typeId: val })
          .then((res) => {
            this.productList = res.data;
            console.log("this.productList", this.productList);
          })
          .catch((err) => {
            this.productList = [];
          });
      } else {
        this.productTypeDescription = "";
        // 先清空所有的产品
        this.form.product = [];
      }
    },
    productSelected(val) {
      console.log("@@@@@@", val);
      this.form.product = val;
      if (val) {
        this.form.description = "";
      }
    },
    open() {
      // console.log(this.data)
      // index 为1的时候是编辑弹窗
      if (this.index === 1) {
        this.form = this.projectInfo;
        // 编辑弹窗 内部数据 填充
        this.form.productType = this.projectInfo.typeBriefInfo.id;
        this.productTypeDescription =
          this.projectInfo.typeBriefInfo.description;
        const product = this.projectInfo.productNames.map((p) => {
          return p.id;
        });
        // this.form.product = this.projectInfo.productNames;
        // console.log("product",this.form.product);
      } else {
        this.productTypeDescription = "";
      }
    },
    initForm() {
      this.form = {
        accountId: "", // vuex中获取
        projectName: "",
        description: "",
        productType: "",
        product: [],
      };
    },
    cancel() {
      this.$emit("cancel");
      this.initForm();
    },
    ok() {
      // 将accountId添加到表单中
      this.form.accountId = this.accountId;
      this.$emit("ok", this.form);
      this.initForm();
    },
  },
};
</script>

<style scoped>
</style>
